<template>
  <div class="leftTree">
    <el-row type="flex" class="coplextext" :gutter="20" >
      <el-col :span="6">
          <!-- 树形 -->
        <el-card style="width: 285px" >
        <el-tree
          :data="data"
          :props="{ label: 'title' }"
          icon-class="el-icon-circle-plus"
           @node-click="selectNode"
        >
        <!-- 使用插槽 -->
      <span class="custom-tree-node" slot-scope="{ node }">
        <span>{{ node.label }}</span>
        <span >
          <el-button
          class="Numnotes"
            type="text"
            size="mini"
            >
            0条笔记
          </el-button>
        </span>
      </span>
        </el-tree>
        </el-card>
      </el-col>
      <el-col class="rigthText" :span="16">
        <el-row class="text quli-editor">
          <quillEditor
          :options="editorOption"
          v-model="content"
          />
        </el-row>
        <el-row>
          <el-col>
              <el-button type="primary" @click="btnok(content)" class="Botton">保存</el-button>
          </el-col>
        </el-row>
        <div class="imgbox" v-if="content">
            <img :src="img" alt="">
        </div>
        <div v-else class="textinput"  @mouseenter="enters()" @mouseleave="leaver()" >
           <el-row  justify="space-between" type="flex">
                <el-col><div class="grid-content bg-purple"  v-show="Showicon">{{ time | parseTime }}</div></el-col>
               <el-row justify="space-between" type="flex">
                  <el-col class="icon" v-show="Showicon">
                      <!-- 编辑图标 -->
                      <i class="el-icon-edit" @click="Btnedit"></i>
                  </el-col>
                  <el-col class="icon" >
                      <!-- 删除图标 -->
                      <i
                      class="el-icon-delete"
                      v-show="Showicon"
                      @click="Btndelete"></i>
                  </el-col>
               </el-row>
            </el-row>
             <div v-html="task" >
                 {{task}}
            </div>
        </div>
      </el-col>
      <el-col :span="2"> </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTreetoolsList } from '@/api/notes'
import { transListToTreeData } from '@/utils/index.js' // 引入树形递归
import { quillEditor } from 'vue-quill-editor' // 富文本

export default {
  name: 'Treeindex',
  components: {
    quillEditor
  },
  data () {
    return {
      data: [],
      name: {},
      defaultProps: {
        children: 'title',
        label: 'title'
      },
      img: require('@/assets/exercise/empty.png'),
      Showicon: false,
      time: new Date(),
      content: '',
      task: JSON.parse(localStorage.getItem('newtask')), // 上传内容本地存储
      editorOption: { // 富文本图标自定义
        placeholder: '请输入内容', // content默认信息
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'color', 'image', 'link', 'video'],
            [{ list: 'ordered' }, { list: 'bullet' }]
          ]
        }
      }
    }
  },
  created () {
    this.getTreetoolsList()
  },
  mounted () {},
  methods: {
    selectNode (data) {
      console.log(data)// 可以拿到点击对应的id
    },
    btnok (val) {
      if (val.length === 0) {
        this.$message('内容不能为空')
      } else {
        this.task = localStorage.setItem('newtask', JSON.stringify(val)) // 拿到富文本里面用户输入的值本地储存
      }
      this.task = JSON.parse(localStorage.getItem('newtask'))
      this.content = '' // 存储后为空
      this.$message('保存成功')
    },
    async getTreetoolsList () { // 发送数据请求，获取树形结构数据
      const { data } = await getTreetoolsList()
      this.data = transListToTreeData(data.children, '')
    },
    enters () { // 鼠标移入显示
      this.Showicon = true
    },
    leaver () { // 鼠标移出隐藏
      this.Showicon = false
    },
    Btndelete () {
      this.$confirm('确认要删除此笔记吗').then(() => {
        this.task = localStorage.removeItem('newtask')
      })
    },
    Btnedit () {
      // 编辑
    }
  },
  computed: {

  },
  watch: {

  }
}
</script>

<style scoped>
.leftTree {
  background-color: #f7f5fa;
}
.coplextext {
  padding-top: 25px;
}
::v-deep .ql-container {
  height: 150px;
  border: transparent;
}
.quill-editor {
  border: 2px solid #d5e7ff;
  border-radius: 7px;
}
.rigthText {
  background-color: #fff;
  width: 100%;
}
.text {
  padding-top: 15px;
}
::v-deep .quli-editor svg{
    width: unset !important;
}
::v-deep .ql-toolbar {
  border: transparent;
  border-bottom: 1px solid #eee;
}
.textinput{
    width: 100%;
    height: 200px;
    border: 1px solid #eee;
    border-radius: 7px;
    margin-top: 30px;
    cursor:pointer;
}

.imgbox{
    display: flex;
   justify-content: center;
   align-items: center;
}
::v-deep .imgbox img{
    width: 100px;
}
.el-tree{
    padding-top: 30px;
}
.Botton{
    justify-content:end;
    margin-top: 20px;
}
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    color: #333;
  }
 ::v-deep.custom-tree-node .Numnotes {
       color: #999;
       font-size: 8px;
   }
.icon {
    margin-right: 20px;
    color: #999;
    font-size: 16px;
}
.grid-content{
    color:#999;
    font-size: 16px;
}
</style>
